@page "/character-creation/{UserId}"
@using jiuyuan.数据.用户类
@using jiuyuan.服务
@inject IUserService UserService
@inject NavigationManager Navigation

<div id="character-creation-page">
    <div class="floating-crystal crystal-1"></div>
    <div class="floating-crystal crystal-2"></div>
    
    <div class="creation-container">
        <h1 class="creation-title">创建角色</h1>
        
        <div class="creation-form">
            <div class="form-group">
                <label class="form-label" for="character-name">角色名称</label>
                <input type="text" id="character-name" class="form-input" placeholder="输入角色名称" @bind="CharacterName">
            </div>
            
            <div class="form-group">
                <label class="form-label" for="character-race">种族</label>
                <input type="text" id="character-race" class="form-input" placeholder="输入角色种族" @bind="SelectedClass">
            </div>
            
            <div class="form-group">
                <label class="form-label">属性分配 (剩余点数: @RemainingPoints)</label>
                <div class="attribute-controls">
                    <div class="attribute-row">
                        <span>力量 (@Strength)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseStrength" disabled="@(!CanDecreaseStrength)">-</button>
                            <button class="attr-btn" @onclick="IncreaseStrength" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                    <div class="attribute-row">
                        <span>敏捷 (@Agility)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseAgility" disabled="@(!CanDecreaseAgility)">-</button>
                            <button class="attr-btn" @onclick="IncreaseAgility" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                    <div class="attribute-row">
                        <span>智力 (@Intelligence)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseIntelligence" disabled="@(!CanDecreaseIntelligence)">-</button>
                            <button class="attr-btn" @onclick="IncreaseIntelligence" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                    <div class="attribute-row">
                        <span>体质 (@Constitution)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseConstitution" disabled="@(!CanDecreaseConstitution)">-</button>
                            <button class="attr-btn" @onclick="IncreaseConstitution" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                    <div class="attribute-row">
                        <span>精神 (@Spirit)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseSpirit" disabled="@(!CanDecreaseSpirit)">-</button>
                            <button class="attr-btn" @onclick="IncreaseSpirit" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                    <div class="attribute-row">
                        <span>幸运 (@Luck)</span>
                        <div class="attribute-buttons">
                            <button class="attr-btn" @onclick="DecreaseLuck" disabled="@(!CanDecreaseLuck)">-</button>
                            <button class="attr-btn" @onclick="IncreaseLuck" disabled="@(!CanIncreaseAttribute)">+</button>
                        </div>
                    </div>
                </div>
            </div>
            
            @if (!string.IsNullOrEmpty(ErrorMessage))
            {
                <div class="error-message">@ErrorMessage</div>
            }
            
            <div class="form-actions">
                <button class="btn btn-secondary" @onclick="CancelCreation">取消</button>
                <button class="btn btn-primary" @onclick="CreateCharacter" disabled="@(!IsFormValid)">创建角色</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public string UserId { get; set; } = "";

    private string CharacterName { get; set; } = "";
    private string SelectedClass { get; set; } = "";
    private string ErrorMessage { get; set; } = "";
    
    // 属性分配
    private const int InitialPoints = 30;
    private int RemainingPoints { get; set; } = InitialPoints;
    private int Strength { get; set; }
    private int Agility { get; set; } 
    private int Intelligence { get; set; } 
    private int Constitution { get; set; } 
    private int Spirit { get; set; }
    private int Luck { get; set; } 
    
    // 属性限制
    private const int MinAttributeValue = 5;
    private const int MaxAttributeValue = 30;
    
    // 计算属性
    private bool CanIncreaseAttribute => RemainingPoints > 0;
    private bool CanDecreaseStrength => Strength > MinAttributeValue;
    private bool CanDecreaseAgility => Agility > MinAttributeValue;
    private bool CanDecreaseIntelligence => Intelligence > MinAttributeValue;
    private bool CanDecreaseConstitution => Constitution > MinAttributeValue;
    private bool CanDecreaseSpirit => Spirit > MinAttributeValue;
    private bool CanDecreaseLuck => Luck > MinAttributeValue;
    
    private bool IsFormValid => !string.IsNullOrEmpty(CharacterName);
    
    // 属性调整方法
    private void IncreaseStrength() => AdjustAttribute("Strength", 1);
    private void DecreaseStrength() => AdjustAttribute("Strength", -1);
    private void IncreaseAgility() => AdjustAttribute("Agility", 1);
    private void DecreaseAgility() => AdjustAttribute("Agility", -1);
    private void IncreaseIntelligence() => AdjustAttribute("Intelligence", 1);
    private void DecreaseIntelligence() => AdjustAttribute("Intelligence", -1);
    private void IncreaseConstitution() => AdjustAttribute("Constitution", 1);
    private void DecreaseConstitution() => AdjustAttribute("Constitution", -1);
    private void IncreaseSpirit() => AdjustAttribute("Spirit", 1);
    private void DecreaseSpirit() => AdjustAttribute("Spirit", -1);
    private void IncreaseLuck() => AdjustAttribute("Luck", 1);
    private void DecreaseLuck() => AdjustAttribute("Luck", -1);
    
    protected override void OnInitialized()
    {
        // 初始化时分配基础属性点数
        var totalBasePoints = Strength + Agility + Intelligence + Constitution + Spirit + Luck;
        RemainingPoints = InitialPoints - totalBasePoints;
    }
    
    private void AdjustAttribute(string attribute, int change)
    {
        if (change > 0 && RemainingPoints <= 0) return;
        
        switch (attribute)
        {
            case "Strength":
                if (Strength + change >= MinAttributeValue && Strength + change <= MaxAttributeValue)
                {
                    Strength += change;
                    RemainingPoints -= change;
                }
                break;
            case "Agility":
                if (Agility + change >= MinAttributeValue && Agility + change <= MaxAttributeValue)
                {
                    Agility += change;
                    RemainingPoints -= change;
                }
                break;
            case "Intelligence":
                if (Intelligence + change >= MinAttributeValue && Intelligence + change <= MaxAttributeValue)
                {
                    Intelligence += change;
                    RemainingPoints -= change;
                }
                break;
            case "Constitution":
                if (Constitution + change >= MinAttributeValue && Constitution + change <= MaxAttributeValue)
                {
                    Constitution += change;
                    RemainingPoints -= change;
                }
                break;
            case "Spirit":
                if (Spirit + change >= MinAttributeValue && Spirit + change <= MaxAttributeValue)
                {
                    Spirit += change;
                    RemainingPoints -= change;
                }
                break;
            case "Luck":
                if (Luck + change >= MinAttributeValue && Luck + change <= MaxAttributeValue)
                {
                    Luck += change;
                    RemainingPoints -= change;
                }
                break;
        }
    }
    
    private async Task CreateCharacter()
    {
        if (string.IsNullOrEmpty(UserId))
        {
            ErrorMessage = "用户ID为空";
            return;
        }
        
        try
        {
            var userId = Guid.Parse(UserId);
            var newCharacter = await UserService.创建玩家角色(userId, CharacterName, SelectedClass);
            Console.WriteLine($"角色创建成功: {newCharacter.角色名}");
            
            // 创建成功后跳转到世界页面，并传递用户ID
            Navigation.NavigateTo($"/world/{UserId}");
        }
        catch (Exception ex)
        {
            ErrorMessage = $"角色创建失败: {ex.Message}";
        }
    }
    
    private void CancelCreation()
    {
        // 取消创建时也传递用户ID回到世界页面
        if (!string.IsNullOrEmpty(UserId))
        {
            Navigation.NavigateTo($"/world/{UserId}");
        }
        else
        {
            Navigation.NavigateTo("/world");
        }
    }
}

<style>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    #character-creation-page {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background: radial-gradient(circle at center, #1a1a3a 0%, #0a0a1a 100%);
        position: relative;
        z-index: 100;
    }
    
    .creation-container {
        background-color: rgba(20, 20, 40, 0.8);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        padding: 30px;
        width: 500px;
        box-shadow: 0 0 20px rgba(106, 13, 173, 0.5);
        position: relative;
    }
    
    .creation-container::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(45deg, #6a0dad, #ff0055, #00ccff);
        border-radius: 12px;
        z-index: -1;
        filter: blur(10px);
        opacity: 0.5;
    }
    
    .creation-title {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 30px;
        color: #b19cd9;
        text-shadow: 0 0 10px rgba(177, 156, 217, 0.7);
        font-family: 'Georgia', serif;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        color: #a0a0e0;
    }
    
    .form-input {
        width: 100%;
        padding: 12px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        font-size: 1rem;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }
    
    .attribute-controls {
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
        padding: 15px;
    }
    
    .attribute-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        color: #e0e0ff;
    }
    
    .attribute-row:last-child {
        margin-bottom: 0;
    }
    
    .attribute-buttons {
        display: flex;
        gap: 10px;
    }
    
    .attr-btn {
        width: 30px;
        height: 30px;
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .attr-btn:hover:not(:disabled) {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.7);
    }
    
    .attr-btn:disabled {
        background: #555;
        cursor: not-allowed;
        opacity: 0.5;
    }
    
    .form-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    
    .btn {
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 100px;
    }
    
    .btn-primary {
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
    }
    
    .btn-primary:hover:not(:disabled) {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
    }
    
    .btn-primary:disabled {
        background: #555;
        cursor: not-allowed;
        opacity: 0.5;
    }
    
    .btn-secondary {
        background: linear-gradient(to right, #333, #555);
    }
    
    .btn-secondary:hover {
        background: linear-gradient(to right, #444, #666);
        box-shadow: 0 0 15px rgba(85, 85, 85, 0.7);
    }
    
    .error-message {
        color: #ff5555;
        margin-bottom: 10px;
        text-align: center;
    }
    
    /* 特效 */
    .floating-crystal {
        position: absolute;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle at 30% 30%, rgba(106, 13, 173, 0.7), transparent 70%);
        border-radius: 50%;
        filter: blur(5px);
        z-index: 0;
    }
    
    .crystal-1 {
        top: 10%;
        left: 10%;
        animation: float 15s infinite ease-in-out;
    }
    
    .crystal-2 {
        bottom: 20%;
        right: 15%;
        animation: float 18s infinite ease-in-out reverse;
    }
    
    @@keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(180deg); }
    }
</style>